<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
   <link rel="stylesheet" href="../style/weui2.css"/>
      <script src="../zepto.min.js"></script>
<style >
.weui_grid{width:25%;}
</style>
</head>

<body ontouchstart>
 
    <div class="bd">
        <div class="weui_grids"  >
            <a href="javascript:;" class="weui_grid js_grid" data-id="button" >
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_button.png" alt="">
                </div>
                <p class="weui_grid_label">
                    按钮
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="cell">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_cell.png" alt="">
                </div>
                <p class="weui_grid_label">
                    列表
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="toast">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_toast.png" alt="">
                </div>
                <p class="weui_grid_label">
                    自动关闭
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="dialog">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_dialog.png" alt="">
                </div>
                <p class="weui_grid_label">
                    弹出框
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="progress">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_progress.png" alt="">
                </div>
                <p class="weui_grid_label">
                    进度条
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="msg">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_msg.png" alt="">
                </div>
                <p class="weui_grid_label">
                    消息
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="article">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_article.png" alt="">
                </div>
                <p class="weui_grid_label">
                    文章
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_actionSheet.png" alt="">
                </div>
                <p class="weui_grid_label">
                    菜单
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="icons">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_icons.png" alt="">
                </div>
                <p class="weui_grid_label">
                    图标
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="panel">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_panel.png" alt="">
                </div>
                <p class="weui_grid_label">
                    面板
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="tab">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_tab.png" alt="">
                </div>
                <p class="weui_grid_label">
                    Tab
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="searchbar">
                <div class="weui_grid_icon">
                    <img src="../images/icon_nav_search_bar.png" alt="">
                </div>
                <p class="weui_grid_label">
                    搜索
                </p>
            </a>
        </div>
        
         <div class="weui_grids"  >
            <a href="javascript:;" class="weui_grid js_grid" data-id="toast" style="width:20%;">
               
                <p class="weui_grid_label">
                    佛坪
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="dialog"  style="width:20%;">
                
                <p class="weui_grid_label">
                    城固
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="progress" style="width:20%;">
                
                <p class="weui_grid_label">
                    洋县
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="msg" style="width:20%;">
                
                <p class="weui_grid_label">
                    宝鸡
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="article" style="width:20%;">
                
                <p class="weui_grid_label">
                    勉县
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" style="width:20%;">
               
                <p class="weui_grid_label">
                    汉台区
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="article"  style="width:20%;">
                
                <p class="weui_grid_label">
                    商洛
                </p>
            </a>
            <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" style="width:20%;">
               
                <p class="weui_grid_label">
                    咸阳
                </p>
            </a>
                        <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" style="width:20%;">
               
                <p class="weui_grid_label">
                    汉中
                </p>
            </a>
                        <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" style="width:20%;">
               
                <p class="weui_grid_label">
                    西安
                </p>
            </a>
        </div>
    </div>
           <div    style="padding:10px"> <p   >对比不做处理的1px边框
           .ui-border-t上边框
           .ui-border-b下边框
           .ui-border-tb上下边框
           .ui-border-l左边框
           .ui-border-r右边框
           .ui-border边框
           .ui-border-radius 圆角边框
           
           </p> <br   > <div    style="height:10px;border:1px solid #e0e0e0"></div> 
</body>
</html>
